import {View, ScrollView, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React from 'react';
import {connect} from 'react-redux';
import * as T from './types';
import './index.less';
import actions from './actions';
import {store2Props} from './selectors';
import bg from '@/assets/image/ipland/bg.png';
import Top from './components/top/index';
import Center from './components/center/index';
import Bottom from './components/bottom/index';
import {AtIcon} from 'taro-ui';
import 'taro-ui/dist/style/components/icon.scss';
//@ts-ignore
actions().actions.loadReducer();
//@ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class personalCenterIndex extends React.Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      navBarHeight: 0,
      navBarPadding: 0,
    };
  }

  componentDidMount() {
    this.getNavHeight();
  }

  getNavHeight() {
    const menuButtonObject = Taro.getMenuButtonBoundingClientRect();

    let menuBottonHeight = menuButtonObject.height;
    let navBarPadding = menuButtonObject.top;
    let navBarHeight = menuBottonHeight + navBarPadding;
    this.setState({
      navBarHeight,
      navBarPadding: navBarPadding,
    });
  }
  componentWillUnmount() {
    this.props.actions.clean();
  }

  componentWillMount(): void {
    this.props.actions.init();
  }
  componentDidShow() {
    console.log("进入这里show")
    this.props.actions.action.getCollectBase();
    this.props.actions.action.getMemberBase();
    this.props.actions.action.getGameUserInfo();
    this.handleQueryMyWishItems(); // 查询我的许愿
    this.handleQueryRecommendItems()
  }


  /**
   * 推荐商品查询
   */
  handleQueryRecommendItems = () => {
    let params = {}
    this.props.actions.action.fetchrecommendation()
  }

  /**
   * 查询我的许愿
   */
  handleQueryMyWishItems = () => {
    let params = {};
    this.props.actions.action.loadMyWishItems(params);
  };

  render() {
    const {
      main: {memberInfo, customer},
    } = this.props;
    return (
      <View className="packageIPersonalCenter">
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            paddingTop: `${this.state.navBarPadding}px`,
            height: `${this.state.navBarHeight}px`,
          }}
        >
          <AtIcon
            onClick={() => {
              Taro.navigateBack();
            }}
            customStyle={{zIndex: 2}}
            value="chevron-left"
            size="30"
            color="#000"
          ></AtIcon>
          <View
            style={{
              fontSize: '36rpx',
              fontWeight: 500,
              color: '#333333',
              margin: '0 auto',
              zIndex: 2,
              transform: 'translateX(-36%)',
            }}
          >
            个人中心
          </View>
        </View>
        <Image className="bg" src={bg} />
        {memberInfo && customer && (
          <ScrollView
            style={{height: `calc(100vh - ${this.state.navBarHeight}px)`}}
            className="packageIPersonalCenter-con"
            scrollY
          >
            {/* 个人信息 */}
            <Top />
            {/* 我的心愿、浏览记录、我的收藏柜 */}
            <Center />
            {/* 为您推荐 暂时不做注释，后续做的时候放开 */}
            <Bottom />
          </ScrollView>
        )}
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
